# 动效开发 1：让它动起来

在现实生活中，人们的大脑习惯了被动态的东西所吸引，适当的动画效果可以为网页添加有价值的交互和反馈，提升用户的情感体验。

情感设计的主要目标是促进人与人之间的沟通，即便媒介是网页。一旦我们在这方面做得到位，电脑本身将回归背后，而网页的个性化将因此得到凸显。

动画效果是情感设计的重要手段，从本小节开始，我们将为大家介绍「H5 开发」的第四个重要的能力 —— 「动画效果开发」，简称「动效开发」，即综合利用 JavaScript、CSS(3)、SVG、Canvas 等多种 Web 技术手段开发出动人的网页动态效果。

回想下我们第 1 小节提及的 「H5 开发」三角形能力模型，「动效开发」处在三角形的上部，毫无疑问这项能力越强，在此岗位中的竞争力越大。

动效开发 —— 先「动」而后「效」，为网页添加动态元素的方法有很多：

• GIF、Flash —— 廉颇老矣，尚能饭否？
• 视频 —— 可远观而不可亵玩焉
• CSS3 结合 JavaScript —— 当红小生

我们将把重心放在 CSS3 动画上面，因为 CSS3 在现如今的网页动效开发中占据着最为重要的一席，作为老大哥 CSS 的补充，它像是专门为「H5 开发」量身定制的动效武器。

拿起这件武器准备杀出一条血路之前，得先找到它的扳机在哪里。

# CSS3 Transition

在 CSS3 的世界里，让网页元素动起来的第一个方法是利用 transition，基于 transition 可以让元素的某个 CSS 属性从指定的开始状态过渡到特定的结束状态。我们将元素「从指定的开始状态过渡到特定的结束状态」这个过程简称为「状态变换」，注意这里的过渡，事实上 transition 便像是页面元素「状态变换」的润滑剂，如果没有 transition，元素「状态变换」的过程将会显得生硬而突兀（如下图中左边的小圆球，查看 DEMO）。

transition 可作用于普通的 CSS 属性（如 background 、opacity …），也可以作用于 CSS3 出现时新引入的 transform 属性，而利用后者可以实现 3D 的过渡效果。transform 属性就像是 CSS3 这个动效武器子弹里的火药，大家可以通过 MDN 的 《transform》 一文进行进一步地了解学习，务必做到深谙其门道，避免一知半解。

# 一个 3D 过渡动效例子

如前面所说，利用 transition 结合 transform 可实现元素的 3D 过渡动效，所以我们这个例子的目标是：利用 transform 属性画一个立方体，然后利用 transition 实现立方体的翻转效果。大家不妨打开 CodePen 按照以下步骤亲自动手试试，或者直接 查看 DEMO 体会最终的结果。

# 步骤 1 - 准备立方体的 HTML 代码

一个立方体（.cube）的 6 个面（.cube-face）。

<div class="demo">
  <div class="cube show-default">
    <div class="cube-face is-front"><im